<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/doc.min.css">
    <style type="text/css">
    	body{background: #f3f3f3}
    	header{background: #ef673c;color: #fff}
    	h2{margin: 0;padding: .5em 0;font-weight: normal;}
    	.icon-arrow-left{font-size: inherit;}
    	header a{transform: translateY(50%);-webkit-transform: translateY(50%);color: #fff;display: block;}
    	a:focus, a:hover{color: #fff;text-decoration: none;}
    	.container{line-height: 4em; background: #fff}
    	.text-nowrap{overflow-x:auto;}
    	.text-nowrap span{display: inline-block;width: 25%;text-align: center;}
    	.container .active{color: orange}
    </style>
</head>
<body class="hidden-md hidden-lg">
	<header class="clearfix">
		<div class="col-xs-2">
			<h2><i class="icon icon-arrow-left"></i></h2>
		</div>
		<div class="col-xs-8 text-center"><h2>年龄</h2></div>
		<div class="col-xs-2 text-right">
			<a href="javascript:saveAge();">保存</a>
		</div>
	</header>
	<div class="container">
		<div class="row text-nowrap">
			<span class="active">50以前</span>
			<span>60后</span>
			<span>70后</span>
			<span>80后</span>
			<span>90后</span>
			<span>00后</span>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$('.text-nowrap span').each(function(){
			$(this).click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
			$('.icon-arrow-left').click(function(){
				$('.wrapper', parent.document).show();
				$('iframe', parent.document).hide();
			})
		})
		function saveAge(){
			var str = '';
			$('.row span').each(function(){
				$(this)[0].className == 'active' ? str=$(this).text() : '';
			})
			console.log(str);
			//return str;
			//window.parent.document.getElementById('age').innerHTML = str;
			//window.parent.document.getElementsByTagName('iframe')[0].style.display = 'none';
			//window.parent.document.getElementById('wrapper').style.display = 'block';
			$('#age', parent.document).html(str);
			$('.wrapper', parent.document).show();
			$('iframe', parent.document).hide();
		}
	</script>
</body>
</html>